<template>
    <div class="user-profile">
        <div class="info-section">
            <el-descriptions :column="1" border class="custom-descriptions">
                <el-descriptions-item label="账号">{{ user.username }}</el-descriptions-item>
                <el-descriptions-item label="商户名称">{{ user.store_name }}</el-descriptions-item>
                <el-descriptions-item label="省份">{{ user.province }}</el-descriptions-item>
                <el-descriptions-item label="城市">{{ user.city }}</el-descriptions-item>
                <el-descriptions-item label="区县">{{ user.area }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ user.addtime }}</el-descriptions-item>
                <el-descriptions-item label="过期时间">{{ user.out_date }}</el-descriptions-item>
                <el-descriptions-item label="点数余额">{{ user.price }}</el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>

<script setup>
import { computed, reactive } from 'vue';

// 用户数据
const props = defineProps({
    user: {
        type: Object,
        default: () => ({})
    }
});

</script>

<style scoped>
.user-profile-container {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 20px;
  border-radius: 8px;
  backdrop-filter: blur(5px);
}

.user-profile {
  max-width: 800px;
  margin: 0 auto;
}

.profile-card {
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #333; /* 深色文字确保可读性 */
}

.info-section {
  padding: 20px;
}

/* 自定义描述列表样式 */
.custom-descriptions {
  --el-descriptions-item-bordered-label-background: rgba(255, 255, 255, 0.2);
  --el-descriptions-item-bordered-content-background: rgba(255, 255, 255, 0.1);
  --el-border-color-lighter: rgba(255, 255, 255, 0.3);
}

.custom-descriptions :deep(.el-descriptions__body) {
  background-color: transparent;
}

.custom-descriptions :deep(.el-descriptions__table) {
  background-color: transparent;
}

.custom-descriptions :deep(.el-descriptions__table tbody tr td),
.custom-descriptions :deep(.el-descriptions__table tbody tr th) {
  background-color: transparent;
}

/* 标签样式 - 灰白色 */
.custom-descriptions :deep(.el-descriptions__label) {
  width: 120px;
  font-weight: bold !important;
  color: #f0f0f0 !important; /* 灰白色 */
}

/* 内容样式 - 深蓝色 */
.custom-descriptions :deep(.el-descriptions__content) {
  color: #ace2f2 !important; /* 深蓝色 */
  font-weight: 500 !important; /* 中等字重 */
}
</style>